<template>
  <div class="container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <span>模型基本信息</span>
      </div>
      <div class="content">
        <div class="mx">
          模型名称：<span>{{ queryObj.modelName }}</span>
        </div>
        <div class="mx">
          模型类型：<span>{{ queryObj.modelName }}</span>
        </div>
        <div class="mx">
          模型版本号：<span>{{ queryObj.modelVersion }}</span>
        </div>
      </div>
      <div class="mx-ms">
        模型描述：<span>{{ queryObj.modelDes }}</span>
      </div>
    </el-card>
    <el-card class="box-card" shadow="always">
      <div slot="header" class="header">
        <el-button type="primary" @click="goBack" style="margin-right: 20px"
          >返回</el-button
        >
        <span>模型参数信息</span>
      </div>
      <div class="title-container">
        <div class="left-box">
          <el-form ref="form" :model="searchForm" class="formClass">
            <el-form-item>
              <el-input
                prefix-icon="el-icon-search"
                type="input"
                placeholder="请输入参数名称"
                v-model="searchForm.searchInput"
              />
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="searchClick">搜索</el-button>
        </div>
      </div>
      <global-card>
        <template #leftTitle>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="newQuipmentClick"
            >添加设备参数</el-button
          >
          <el-button type="success" icon="el-icon-refresh" @click="refresh"
            >刷新</el-button
          >
        </template>
        <template #content>
          <el-table
            v-loading="loading"
            :data="tableData"
            border
            style="width: 100%"
            class="elTable"
            ref="tableRef"
          >
            <el-table-column
              type="index"
              label="序号"
              width="80"
              align="center"
            />
            <el-table-column
              prop="parameterName"
              label="参数名称"
              align="center"
            />

            <el-table-column
              prop="parameterCode"
              label="参数代码"
              align="center"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
            />
            <el-table-column label="操作" width="300" align="center">
              <template #default="{ row }">
                <el-button type="warning" size="mini" @click="handlerEdit(row)"
                  >编辑</el-button
                >
                <el-button type="danger" size="mini" @click="handlerDelete(row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
        <template #footer>
          <pagination
            class="pagination"
            :total="count"
            :page.sync="pageIndex"
            :limit.sync="pageSize"
            @pagination="pagination"
          />
        </template>
      </global-card>

      <yc-dialog
        ref="ycDialog"
        :dialogTitle="dialogTitle"
        :centerTitle="dialogCenterTitle"
      >
        <template #content>
          <div class="dialog-content">
            <el-form
              :model="newQuipmentModel"
              :rules="rules"
              ref="loginFormRef"
              label-width="120px"
            >
              <el-form-item label="设备参数名称" prop="parameterName">
                <el-input v-model="newQuipmentModel.parameterName" />
              </el-form-item>

              <el-form-item label="参数代码" prop="parameterCode">
                <el-input v-model="newQuipmentModel.parameterCode" />
              </el-form-item>
              <el-form-item label="参数类型" prop="parameterType">
                <el-select
                  v-model="newQuipmentModel.parameterType"
                  :disabled="paramsBoolean"
                >
                  <el-option
                    v-for="item in paramsTypeData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <div
                v-if="
                  newQuipmentModel.parameterType == '参数数值' ||
                  newQuipmentModel.parameterType == 0
                "
              >
                <el-form-item label="倍数">
                  <el-input v-model="newQuipmentModel.multiple" />
                </el-form-item>
              </div>
              <div
                v-if="
                  newQuipmentModel.parameterType == '参数状态' ||
                  newQuipmentModel.parameterType == 1
                "
              >
                <el-form-item label="长度">
                  <el-select
                    v-model="newQuipmentModel.remark1"
                    :disabled="paramsBoolean"
                  >
                    <el-option
                      v-for="item in longLengthData"
                      :key="item.value"
                      :label="item.value"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="子参数：">
                  <el-button
                    style="margin-left: 50px"
                    type="primary"
                    size="mini"
                    @click="addParams"
                    >添加</el-button
                  >
                </el-form-item>
                <global-card>
                  <template #content>
                    <el-table
                      :data="tableForm"
                      border
                      style="width: 100%"
                      class="elTable"
                      ref="tableRef"
                    >
                      <el-table-column
                        prop="parsingCode"
                        label="代码"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingCode" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="parsingName"
                        label="名称"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingName" />
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="parsingLoa"
                        label="位数"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingLoa" /> </template
                      ></el-table-column>
                      <el-table-column
                        prop="statusZero"
                        label="状态/0"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.statusZero" /> </template
                      ></el-table-column>
                      <el-table-column
                        prop="statusOne"
                        label="状态/1"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.statusOne" /> </template
                      ></el-table-column>
                      <el-table-column
                        prop="badStatus"
                        label="故障状态"
                        align="center"
                      >
                        <template #default="{ row }">
                          <!-- <el-input v-model="row.badStatus" />  -->
                          <el-select v-model="row.badStatus">
                            <el-option
                              v-for="item in badStatus"
                              :key="item.value"
                              :label="item.value"
                              :value="item.value"
                            />
                          </el-select> </template
                      ></el-table-column>
                      <el-table-column
                        prop="badType"
                        label="故障类型"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-select v-model="row.badType">
                            <el-option
                              v-for="item in gzlxAData"
                              :key="item.key"
                              :label="item.value"
                              :value="item.key"
                            />
                          </el-select> </template
                      ></el-table-column>
                    </el-table>
                  </template>
                </global-card>
              </div>
              <div
                v-if="
                  newQuipmentModel.parameterType == '枚举' ||
                  newQuipmentModel.parameterType == 2
                "
              >
                <el-form-item label="子参数">
                  <el-button
                    style="margin-left: 480px"
                    type="primary"
                    size="mini"
                    @click="addParams"
                    >添加</el-button
                  >
                </el-form-item>
                <global-card>
                  <template #content>
                    <el-table
                      :data="tableForm"
                      border
                      style="width: 100%"
                      class="elTable"
                      ref="tableRef"
                    >
                      <el-table-column
                        prop="parsingCode"
                        label="代码"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingCode" />
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="parsingName"
                        label="名称"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingName" />
                        </template>
                      </el-table-column>

                      <el-table-column
                        prop="parsingLoa"
                        label="字节位置"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingLoa" /> </template
                      ></el-table-column>
                      <el-table-column
                        prop="parsingValue"
                        label="值"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingValue" /> </template
                      ></el-table-column>
                      <el-table-column
                        prop="parsingSpeak"
                        label="解释"
                        align="center"
                      >
                        <template #default="{ row }">
                          <el-input v-model="row.parsingSpeak" /> </template
                      ></el-table-column>
                    </el-table>
                  </template>
                </global-card>
              </div>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button type="primary" @click="dialogSave">确定</el-button>
          <el-button @click="$refs.ycDialog.dialogVisible = false"
            >取消
          </el-button>
        </template>
      </yc-dialog>
      <global-message
        v-if="isGlobalMessageShow"
        @receive="receive"
        :message="message"
      />
    </el-card>
  </div>
</template>
<script>
import {
  queryPageDeviceSedModelParameter,
  updateDeviceSedModelParameter,
  deleteDeviceSedModelParameter,
  insertDeviceSedModelParameter
} from "@/api/modelManagement/applicationScenariosDetail"
import { queryAllParametersFailureType } from "@/api/enmu/deviceDetail"
import ycDialog from "@/components/pageDialog"
export default {
  data() {
    return {
      paramsBoolean: false,
      tableForm: [],
      badStatus: [
        {
          value: 0
        },
        {
          value: 1
        }
      ],
      longLengthData: [
        {
          value: 8
        },
        {
          value: 16
        },
        {
          value: 32
        },
        {
          value: 64
        }
      ],
      paramsTypeData: [],
      tableData: [],
      formatDate: "yyyy-MM-dd",
      count: 0,
      searchForm: {
        searchInput: "",
        searchSelectValue: ""
      },
      newQuipmentModel: {
        parsingCode: "",
        parameterName: "",
        multiple: "",
        unit: "",
        parameterCode: "",
        remark1: "",
        // modelDes: "",
        id: "",
        parameterType: 0,
        modelCode: "",
        parameterSysCode: ""
      },
      rules: {
        parameterName: [
          { required: true, message: "请输入设备参数名称", trigger: "blur" }
        ],
        parameterCode: [
          { required: true, message: "请输入参数代码", trigger: "blur" }
        ],
        parameterType: [
          { required: true, message: "请选择参数类型", trigger: "bchange" }
        ]
      },
      detailsDisabled: false,
      isGlobalMessageShow: false,

      dialogCenterTitle: "",
      dialogTitle: "",
      message: "",
      pageIndex: 1,
      pageSize: 20,
      loading: false,
      queryObj: {},
      gzlxAData: []
    }
  },
  components: {
    ycDialog
  },
  created() {
    this.queryObj = this.$route.query
    this.paramsTypeData = [
      {
        label: "参数数值",
        value: "0"
      },
      {
        label: "参数状态",
        value: "1"
      },
      {
        label: "枚举",
        value: "2"
      }
    ]
    this.getPageProject()
    queryAllParametersFailureType().then((data) => {
      this.gzlxAData = data.object
    })
    // const { modelName, modelType, modelVersion, modelDes } = row
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    addParams() {
      // let obj = {}
      this.tableForm.push({})
    },
    async getPageProject(pageIndex = 1, pageSize = 20) {
      this.loading = true
      // projectType
      const { searchInput, searchSelectValue } = this.searchForm
      const { object } = await queryPageDeviceSedModelParameter({
        pageIndex,
        pageSize,
        parameterName: searchInput,
        modelCode: this.queryObj.modelCode
        // modelType: searchSelectValue
      })
      this.count = object.count
      this.tableData = object.data
      // this.tableForm =
      this.loading = false
    },

    async searchClick() {
      this.getPageProject(1, 20)
    },
    async dialogSave() {
      this.$refs.loginFormRef.validate(async (v) => {
        if (v) {
          this.$refs.ycDialog.dialogVisible = false
          if (this.detailsDisabled) {
            // 详情
            this.$refs.ycDialog.dialogVisible = false
          } else if (this.newQuipmentModel.id) {
            //  编辑
            const { status } = await updateDeviceSedModelParameter({
              ...this.newQuipmentModel,
              modelCode: this.queryObj.modelCode,
              mapString1: JSON.stringify(this.tableForm)
            })

            if (status == 200) {
              this.getPageProject()
              this.isGlobalMessageShow = true
              this.message = "success"
              this.tableForm = []

              // this.newQuipmentModel = {}
            } else {
              this.message = "error"
            }
          } else {
            this.insertDeviceModelFun()
            this.getPageProject()
            this.tableForm = []
            // this.newQuipmentModel = {}
          }
        }
      })

      // this.getPageProject()
    },
    receive() {
      this.isGlobalMessageShow = false
    },
    dateChange(dateItem) {
      console.log(dateItem, this.searchForm)
    },

    selectChange() {
      console.log("aaa")
    },
    pagination(pageItem) {
      this.getPageProject(pageItem.page, pageItem.limit)
    },
    refresh() {
      Object.keys(this.searchForm).forEach((item) => {
        this.searchForm[item] = ""
      })
      this.getPageProject()
    },
    // 编辑
    handlerEdit(row) {
      this.dialogCenterTitle = "编辑可配置模型"
      this.dialogTitle = "设备详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      // this.newQuipmentModel = {}
      this.paramsBoolean = true
      this.detailsDisabled = false
      this.newQuipmentModel.parameterName = row.parameterName
      this.newQuipmentModel.parameterCode = row.parameterCode
      this.newQuipmentModel.parameterType = row.parameterType
      this.newQuipmentModel.remark1 = row.remark1
      this.newQuipmentModel.modelCode = row.modelCode
      this.newQuipmentModel.id = row.id
      this.newQuipmentModel.parameterSysCode = row.parameterSysCode
      this.newQuipmentModel.multiple = row.multiple
      this.tableForm = row.parameterParsings
    },
    handlerDelete({ id }) {
      this.$confirm("确定删除此用户吗", "删除操作", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
        center: true
      }).then(async () => {
        const { status } = await deleteDeviceSedModelParameter({
          id,
          modelCode: this.queryObj.modelCode
        })
        if (status == 200) {
          console.log(id)
          this.getPageProject()
          this.isGlobalMessageShow = true
          this.message = "success"
        } else {
          this.message = "error"
        }
      })
    },
    newQuipmentClick() {
      this.paramsBoolean = false
      this.dialogCenterTitle = "新建可配置模型"
      this.dialogTitle = "设备详情"
      this.$refs.ycDialog.dialogVisible = true
      this.$refs.loginFormRef?.clearValidate()
      this.newQuipmentModel = {
        parsingCode: "",
        parameterName: "",
        multiple: "",
        unit: "",
        parameterCode: "",
        remark1: "",
        id: "",
        parameterType: null,
        modelCode: "",
        parameterSysCode: ""
      }

      this.tableForm = []
      this.detailsDisabled = false
    },

    async insertDeviceModelFun() {
      const { status } = await insertDeviceSedModelParameter({
        ...this.newQuipmentModel,
        modelCode: this.queryObj.modelCode,
        mapString1: JSON.stringify(this.tableForm)
      })
      if (status == "200") {
        this.isGlobalMessageShow = true
        this.message = "success"
      } else {
        this.isGlobalMessageShow = true
        this.message = "error"
      }
    },
    async updateDeviceModelFun() {}
  }
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  .box-card {
    // box-shadow: 10px 0px 8px rgba(0, 0, 0, 0.9);
    margin-bottom: 20px;
    .header {
      span {
        font-weight: 800;
        font-size: 20px;
      }
    }
    .content {
      display: flex;
      padding: 0 20px;
      .mx {
        flex: 1;
        font-weight: 600;
        font-size: 18px;
        padding: 30px 0;
        span {
          font-weight: 400;
        }
      }
    }
    .mx-ms {
      padding: 0 20px;
      font-weight: 600;
      font-size: 18px;
      span {
        font-weight: 400;
      }
    }
    .title-container {
      display: flex;
      // justify-content: flex-end;
      margin-left: 20px;

      .left-box {
        display: flex;

        .formClass {
          display: flex;
          margin-right: 20px;
          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;
            .el-input {
              width: 216px;
            }
            .el-select {
              width: 171px;
              margin-left: 10px;
            }
            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }
        .el-button {
          // width: 42px;
          height: 36px;
          margin-top: 20px;
        }
      }
    }
  }
}
</style>
